<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <ul class="list">
  </ul>

  <script>
      const arr = [
          {name: "小明", age: 12, sex: "男"},
          {name: "小红", age: 11, sex: "女"},
          {name: "小强", age: 13, sex: "男"},
      ];

      const list = document.querySelector(".list");

      arr.forEach(people => {
          const str = [
              '<li>',
              '    <div className="hd">' + people.name + '的基本信息</div>',
              '    <div className="bd">',
              '        <p>' + '姓名：' + people.name + '</p>',
              '        <p>' + '年龄：' + people.age + '</p>',
              '        <p>' + '性别：' + people.sex + '</p>',
              '    </div>',
              '</li>'
          ].join('');

          list.innerHTML += str;
      });
  </script>
</body>
</html>